<template>
  <div>
    <div class="root">
      <div id="full" :style="{ width: fuw+'px' }">
        <img src="@/assets/st1.png" alt="" />
      </div>
      <div id="empty">
        <img src="@/assets/st2.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "start",
  data() {
    return {
      fuw: "",
    };
  },
  methods: {
    suan(){
     this.fuw=this.scorer*16.8
    }
  },
  props: {
    scorer: Number,
  },
  created(){
    this.suan()
  },
  watch:{
    scorer:'suan'
  }
};
</script>
<style scoped>
.root {
  position: relative;
  width: 65%;
}
#full {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#empty {
  text-align: left;
}
</style>